<template>
    <div id="app" class="container">
        <div class="sidebar">
            WebView
            <button @click="navWebView('https://www.baidu.com/')">显示百度首页</button>            
    <a-dropdown placement="right" arrow>
          <template #overlay>
            <a-menu>
              <a-menu-item  @click="navWebView('https://www.gitee.com/')"> Gitee网站</a-menu-item>
              <a-menu-item  @click="navWebView('https://www.qq.com/')"> QQ网站 </a-menu-item>
            </a-menu>
          </template>          
          <button>右侧显示子菜单</button>         
      </a-dropdown>
            <p>
                自Electron v29开始，WebView 仍然可用，但官方建议在新项目中优先使用BrowserView（or WebContentsView）
            </p>

        </div>
        <div class="content" id="WebView">
            <webview id="myWebView" :src="outsideUrl" style="width: 100%; height: 100%;" allowpopups />
        </div>

    </div>

</template>

<script setup>
import { ipcApiRoute } from "@/api/main";
import { ipc, isEE } from "@/utils/ipcRenderer";
import { onMounted, ref } from 'vue';

const outsideUrl = ref("");

function navWebView(url) {
    console.log(url);
    outsideUrl.value = url;
}

</script>

<style lang="less" scoped>
#app {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%;
}

.sidebar {
    width: 140px;
    background-color: #f4f4f4;
    padding: 5px;
    position: relative;
    z-index: 999;
}

.sidebar p {
    margin-top: 10px;
    padding: 5px;
    font-size: 11px;
    line-height: 1.5;
    background-color: #d0ff58;
}

.sidebar button {
    margin-top: 5px;
}

.content {
    flex: 1;
}
</style>